<template>
  <div class="container flex-column">
    <div class="tool-box  flex-between">
      <div class="left flex-box">
        <div class="flex-box">
          <span>设备名称</span>
          <el-input type="text" v-model="query.deviceName"></el-input>
        </div>
        <div class="flex-box ">
          <span>采集时间</span>
          <el-date-picker
            v-model="query.daterange"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            type="daterange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间">
          </el-date-picker>
        </div>

      </div>
      <div class="right flex-box">
        <el-button plain icon="el-icon-download" @click="exprotClick">导出</el-button>
        <el-button plain icon="el-icon-search" @click="page.currentPage = 1;onLoad(page)">搜索</el-button>
        <el-button plain  type="danger" icon="el-icon-delete" @click="searchReset">清空</el-button>
      </div>

    </div>
    <div class="m-table" style="height: 360px">

      <el-table header-cell-class-name="table-header"
                row-class-name="pointer"
                v-loading="loading"
                @row-click="rowClick"
                :data="data" stripe
                style="width: 100%">
        <el-table-column
          type="index"
          width="100"
          label="序号"
        >
        </el-table-column>
        <el-table-column
          prop="deviceName"
          width="250"
          label="设备名称"
        >
        </el-table-column>
        <el-table-column
          prop="alarmValue"
          width="200"
          label="报警阈值"
        >
        </el-table-column>
        <el-table-column
          prop="realityValue"
          width="200"
          label="实时值"
        >
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="报警时间"
        >
        </el-table-column>

        <el-table-column
          prop="alarmContent"
          label="报警内容"
        >
        </el-table-column>

      </el-table>
      <div class="page">
        <el-pagination
          @current-change="currentChange"
          :current-page="page.currentPage"
          :page-size="page.pageSize"
          layout="total,  prev, pager, next, jumper"
          :total="page.total">
        </el-pagination>
      </div>
    </div>


  </div>
</template>
<script>
  import {warningData} from "../../api/platform/alarm";
  import {getToken} from "../../util/auth";

  export default {
    name:'alarm',
    data(){
      return{
        query:{},
        loading: true,
        page: {
          pageSize: 6,
          currentPage: 1,
          total: 0
        },
        data: [],
        deviceTypeList:[],
        regionList:[],
        chart:null,
        chartName:''
      }
    },
    methods:{
      exprotClick(){
        let url = `/api/blade-platform/productdevicealarmlog/export?blade-auth=${getToken()}&deviceName=${this.query.deviceName}`
        if(this.query.daterange&&this.query.daterange.length && this.query.daterange[0]){
          url+=`&startTime=${this.query.daterange&&this.query.daterange[0]}&endTime=${this.query.daterange&&this.query.daterange[1]}`
        }
        window.open(url);
      },
      currentChange(currentPage){
        this.page.currentPage = currentPage;
        this.onLoad(this.page)
      },
      searchReset() {
        this.query = {};
        this.onLoad(this.page);
      },
      onLoad(page) {
        this.loading = true;
        let params = {}
        Object.assign(params, this.query,{deviceType:1})
        if(this.query.daterange&&this.query.daterange.length && this.query.daterange[0]){
          params.startTime = this.query.daterange[0]
          params.endTime = this.query.daterange[1]
        }
        warningData(page.currentPage, page.pageSize, params).then(res => {

          const data = res.data.data;
          this.page.total = data.total;
          this.data = data.records;
          this.loading = false;
        });

      },
    },
    mounted() {
      this.onLoad(this.page)
    }

  }
</script>
